<template>
	<view class="container">
		<navbar :background="background" :bgSize='bgSize' color='#fff' title="收益提现"></navbar>
		<view class="bg">
			<image :src='hostUrl+"/static/img/manage.png"'>
			</image>
		</view>
		<view class="wrap">
			<view class="title-wrap">
				<view class="title">可提现收益</view>
				<view class="cash-con">
					<view class="left">￥<text>230</text></view>
					<text class="right">累计提现￥20021.00</text>
				</view>
			</view>
			<view class="way-wrap">
				<label>提现方式</label>
				<view class="right line_center">
					<text>支付宝</text>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="withdraw-wrap">
				<view class="title line_h_center">
					<text>提现金额</text>
					<view class="all" @tap='drawAll'>全部</view>
				</view>
				<view class="money-con line_center">
					<text>￥</text>
					<input placeholder="输入提现金额" v-model="cashMoney" type="text" @input="getVal" placeholder-style="font-size:28rpx"/>
				</view>
				<view class="true line_h_center">
					<view class="true-rate">提现手续费：{{rateMoney}}元</view>
					<view class="true-cash">实际到账：{{paymentMoney}}元</view>
				</view>
			</view>
			<button class="btn line_center" :disabled="isDisabled" @tap='drawMoney'>申请提现</button>
			<view class="record-wrap">
				<view class="title-wrap line_center">
					<image src='../img/cash-icon.png'></image>
					<text>提现记录</text>
					<image src='../img/cash-icon.png'></image>
				</view>
				<view class="list-wrap">
					<view class="list-item">
						<view class="left">
							<view class="base-title">提现</view>
							<view class="time">2024-12-20 15:59:03</view>
						</view>
						<view class="right">
							<view class="base-title">-100</view>
							<view class="time">余额：￥3020.00</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				hostUrl: app.globalData.hostUrl,
				background: `url(${app.globalData.hostUrl}/static/img/manage.png)`,
				bgSize: '100% 328rpx',
				cashMoney:'',
				rateMoney:0,
				paymentMoney:0,
			};
		},
		methods:{
			getVal(e){
				console.log('e',e)
				this.cashMoney = this.$trim(e.detail.value);
				if(this.cashMoney){
					this.isDisabled = false
				}else{
					this.isDisabled = true
				}
				this.getDrawRate(this.cashMoney ? this.cashMoney :0)
			},
			drawAll(){
				this.cashMoney = this.commssion;
				if(this.cashMoney){
					this.isDisabled = false
				}else{
					this.isDisabled = true
				}
				this.getDrawRate(this.cashMoney ? this.cashMoney :0)
			},
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}
	
	.bg {
		width: 100%;
		height: 328rpx;
		position: absolute;
		left: 0;
		top: 0;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.wrap{
		position: relative;
		z-index:22;
	}
	.title-wrap{
		padding:24rpx 34rpx 0 48rpx;
		color:#fff;
		font-size: 24rpx;
		
		.cash-con{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top:10rpx;
			.left{
				text{
					font-family: 'DIN-BOLD';
					font-size: 48rpx;
					line-height: 52rpx;
				}
			}
		}
	}
	.way-wrap{
		margin:70rpx 24rpx 0;
		padding:0 24rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		label{
			font-weight: bold;
		}
	}
	.withdraw-wrap{
		padding:46rpx 24px 32rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin:24rpx 24rpx 0;
		.title{
			justify-content: space-between;
			font-weight: bold;
			.all{
				font-weight: normal;
			}
		}
		.money-con{
			padding:56rpx 0;
			border-bottom: 2rpx solid #F2F3F9;
			text{
				font-size: 36rpx;
			}
			input{
				height: 36rpx;
				font-size: 28rpx;
			}
		}
		.true{
			justify-content: space-between;
			padding-top:30rpx;
			.true-rate{
				font-size: 24rpx;
				color: #666666;
			}
			.true-cash{
				font-size: 24rpx;
				color: #EC1818;
			}
		}
	}
	.btn{
		width: 686rpx;
		height: 84rpx;
		background: linear-gradient( 82deg, #FA5B3B 0%, #EC1818 100%);
		border-radius: 42rpx;
		color:#fff;
		font-size: 32rpx;
		margin-top:56rpx;
	}
	.btn[disabled]:not([type]),
	.btn[disabled][type=default] {
		color: #fff !important;
		background: #E2E2E2 !important;
	}
	.record-wrap{
		padding:24rpx 24px 32rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin:24rpx 24rpx 0;
		.title-wrap{
			image{
				width: 17rpx;
				height: 17rpx;
			}
			text{
				padding:0 14rpx;
				color:#333;
				font-size: 28rpx;
			}
		}
		.list-wrap{
			// margin:0 32rpx;
			.list-item{
				padding:28rpx 0 18rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #F6F7FB;
				.right{
					text-align: right;
				}
				.base-title{
					font-weight: bold;
				}
				.time{
					color: rgba(49,49,49,0.8);
					font-size: 24rpx;
					padding-top:6rpx;
				}
			}
		}
	}
</style>
